<template>
  <vxe-grid ref="xGrid" v-bind="appmcsGridOptions">
    <!--将表单放在工具栏中-->
    <template #toolbar_buttons>
      <vxe-form :data="formData" @submit="searchEvent" @reset="searchEvent">
        <vxe-form-item>
          <vxe-button status="primary">新增</vxe-button>
        </vxe-form-item>
        <vxe-form-item
          field="name"
          :item-render="{ name: 'input', attrs: { placeholder: '请输入名称' } }"
        ></vxe-form-item>
        <vxe-form-item
          :item-render="{
            name: '$buttons',
            children: [
              { props: { type: 'submit', content: '查询', status: 'primary' } },
              { props: { type: 'reset', content: '重置' } },
            ],
          }"
        ></vxe-form-item>
      </vxe-form>
    </template>

    <!--自定义空数据模板-->
    <template #empty>
      <span style="color: red">
        <img src="/vxe-table/static/other/img1.gif" />
        <p>没有更多数据了！</p>
      </span>
    </template>
  </vxe-grid>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import { VXETable, VxeGridInstance, VxeGridProps } from 'vxe-table';
  export default defineComponent({
    setup() {
      const xGrid = ref({} as VxeGridInstance);
      const searchEvent = () => {
        const $grid = xGrid.value;
        $grid.commitProxy('query');
      };

      const formData = reactive({
        name: '',
      });
      const appmcsGridOptions = reactive<VxeGridProps>({
        id: 'appMcsXgridid',
        height: 'auto',
        rowId: 'id',
        toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons',
          },
          refresh: true,
          import: false,
          export: false,
          print: false,
          zoom: false,
          custom: false,
        },
        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          form: false, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
          ajax: {
            // 接收 Promise
            query: () => {
              //     { page, sorts, filters, form }
              //   const queryParams: any = Object.assign({}, form);
              //   // 处理排序条件
              //   const firstSort = sorts[0];
              //   if (firstSort) {
              //     queryParams.sort = firstSort.property;
              //     queryParams.order = firstSort.order;
              //   }
              //   // 处理筛选条件
              //   filters.forEach(({ property, values }) => {
              //     queryParams[property] = values.join(',');
              //   });
              //  XEAjax.get(`https://api.xuliangzhan.com:10443/demo/api/pub/page/list/${page.pageSize}/${page.currentPage}`, queryParams)
              return null;
            },
            //delete: ({ body }) => XEAjax.post('https://api.xuliangzhan.com:10443/demo/api/pub/save', body),
            //save: ({ body }) => XEAjax.post('https://api.xuliangzhan.com:10443/demo/api/pub/save', body),
          },
        },
        columns: [
          { type: 'checkbox', title: 'ID', width: 120 },
          {
            field: 'name',
            title: 'Name',
            sortable: true,
            titleHelp: { message: '名称必须填写！' },
            editRender: { name: 'input', attrs: { placeholder: '请输入名称' } },
          },
          {
            field: 'role',
            title: 'Role',
            sortable: true,
            filters: [
              { label: '前端开发', value: '前端' },
              { label: '后端开发', value: '后端' },
              { label: '测试', value: '测试' },
              { label: '程序员鼓励师', value: '程序员鼓励师' },
            ],
            filterMultiple: false,
            editRender: { name: 'input', attrs: { placeholder: '请输入角色' } },
          },
          {
            field: 'email',
            title: 'Email',
            width: 160,
            editRender: { name: '$input', props: { placeholder: '请输入邮件' } },
          },
          {
            field: 'nickname',
            title: 'Nickname',
            editRender: { name: 'input', attrs: { placeholder: '请输入昵称' } },
          },
          {
            field: 'sex',
            title: 'Sex',
            filters: [
              { label: '男', value: '1' },
              { label: '女', value: '0' },
            ],
            editRender: { name: '$select', options: [], props: { placeholder: '请选择性别' } },
          },
          {
            field: 'age',
            title: 'Age',
            visible: false,
            sortable: true,
            editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } },
          },
          {
            field: 'amount',
            title: 'Amount',
            editRender: { name: '$input', props: { type: 'float', digits: 2, placeholder: '请输入数值' } },
          },
          {
            field: 'updateDate',
            title: 'Update Date',
            width: 160,
            visible: false,
            sortable: true,
          },
          {
            field: 'createDate',
            title: 'Create Date',
            width: 160,
            visible: false,
            sortable: true,
          },
        ],
      });
      return {
        xGrid,
        appmcsGridOptions,
        searchEvent,
        formData,
      };
    },
  });
</script>
<style lang="less" scoped></style>
